import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { UserList, UserForm } from '../features';
import { Button, Modal, Container, Stack, Group, Title, Text, Box, Grid, Card } from '@mantine/core';
import { IconPlus, IconSearch, IconEdit, IconCheck, IconBolt, IconHome, IconArrowRight } from '@tabler/icons-react';
import { User } from '../../types';

const UsersPage: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  const handleCreateUser = () => {
    setEditingUser(null);
    setIsModalOpen(true);
  };

  const handleEditUser = (user: User) => {
    setEditingUser(user);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setEditingUser(null);
  };

  const handleUserSaved = () => {
    setIsModalOpen(false);
    setEditingUser(null);
    setRefreshKey(prev => prev + 1);
  };

  return (
    <Container size="xl">
      <Stack gap="xl">
        {/* Header */}
        <Group justify="space-between" align="flex-start">
          <Box>
            <Title order={1} size="h1">用户管理</Title>
            <Text c="dimmed" mt="sm">
              管理系统用户，包括创建、编辑、删除和搜索功能
            </Text>
          </Box>
          <Group gap="sm">
            <Button
              component={Link}
              to="/"
              variant="outline"
              leftSection={<IconHome size={16} />}
            >
              返回首页
            </Button>
            <Button
              leftSection={<IconPlus size={16} />}
              onClick={handleCreateUser}
            >
              新建用户
            </Button>
          </Group>
        </Group>

        {/* Features Overview */}
        <Card bg="blue.0" p="lg">
          <Title order={2} size="h3" mb="md">功能特性</Title>
          <Grid>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="blue.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconSearch size={16} color="var(--mantine-color-blue-6)" />
                </Box>
                <Text size="sm" c="gray.7">实时搜索</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="green.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconEdit size={16} color="var(--mantine-color-green-6)" />
                </Box>
                <Text size="sm" c="gray.7">快速编辑</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="violet.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconCheck size={16} color="var(--mantine-color-violet-6)" />
                </Box>
                <Text size="sm" c="gray.7">表单验证</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="yellow.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconBolt size={16} color="var(--mantine-color-yellow-6)" />
                </Box>
                <Text size="sm" c="gray.7">响应式设计</Text>
              </Group>
            </Grid.Col>
          </Grid>
        </Card>

        {/* User List */}
        <Card shadow="sm" withBorder>
          <UserList
            key={refreshKey}
            onEditUser={handleEditUser}
          />
        </Card>

        {/* User Form Modal */}
        <Modal
          opened={isModalOpen}
          onClose={handleCloseModal}
          title={editingUser ? '编辑用户' : '新建用户'}
          size="md"
        >
          <UserForm
            user={editingUser}
            onSuccess={handleUserSaved}
            onCancel={handleCloseModal}
          />
        </Modal>

        {/* Code Example Section */}
        <Card bg="gray.0" p="lg">
          <Title order={2} size="h3" mb="md">技术实现</Title>
          <Grid>
            <Grid.Col span={{ base: 12, lg: 6 }}>
              <Title order={3} size="h4" mb="sm">核心技术栈</Title>
              <Stack gap="xs">
                <Group gap="sm">
                  <Box w={8} h={8} bg="blue.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">React 18 + TypeScript</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="green.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">自定义 Hooks (useUsers, useDebounce)</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="violet.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">组件化设计 (UserList, UserForm)</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="yellow.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">Mantine UI 组件库</Text>
                </Group>
              </Stack>
            </Grid.Col>
            <Grid.Col span={{ base: 12, lg: 6 }}>
              <Title order={3} size="h4" mb="sm">功能特性</Title>
              <Stack gap="xs">
                <Group gap="sm">
                  <Box w={8} h={8} bg="red.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">实时搜索和防抖处理</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="indigo.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">表单验证和错误处理</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="pink.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">模态框和交互反馈</Text>
                </Group>
                <Group gap="sm">
                  <Box w={8} h={8} bg="teal.5" style={{ borderRadius: '50%' }} />
                  <Text size="sm" c="gray.6">响应式布局设计</Text>
                </Group>
              </Stack>
            </Grid.Col>
          </Grid>
        </Card>

        {/* Navigation */}
        <Group justify="center">
          <Button
            component={Link}
            to="/products"
            variant="outline"
            rightSection={<IconArrowRight size={16} />}
          >
            查看产品展示
          </Button>
        </Group>
      </Stack>
    </Container>
  );
};

export default UsersPage;